<template>
  <div class="content">
    <div class="edit" @click="editMethods">Edit</div>
    <p>标题:{{ menuitem.title }}</p>
    <p>内容:{{ menuitem.content }}</p>
    <p>所属分类:{{ cate }}</p>
    <div class="del" @click="delMethods">Del</div>
    <el-dialog title="修改" :visible="dialogVisible" width="30%">
      标题
      <el-input v-model="form.title"></el-input>
      内容
      <el-input v-model="form.content"></el-input>
      类型
      <el-select v-model="form.isCate" placeholder="选择类型">
        <el-option label="学习" :value="0"></el-option>
        <el-option label="工作 " :value="1"></el-option>
        <el-option label="热门 " :value="2"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subMethods">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
interface Iform {
  id: number;
  isCate: number;
  title: string;
  content: string;
}
@Component
export default class NavItem extends Vue {
  cate!: string; // 判断类型
  // 数据初始化双绑
  form: Iform = {
    id: -1,
    isCate: 0,
    title: "",
    content: ""
  };
  dialogVisible: boolean = false;
  // 获取 父组件传值
  @Prop() menuitem!: any;
  // watch侦听器
  @Watch("menuitem", { /*immediate: true,*/ deep: true }) //用于深度监听对象  immediate上来就执行
  getmenuitem(newVal: object, oldVal: object) {
    if (this.menuitem.isCate === 0) {
      this.cate = "学习";
    } else if (this.menuitem.isCate === 1) {
      this.cate = "工作";
    } else {
      this.cate = "热门";
    }
  }
  // 修改方法
  editMethods() {
    this.dialogVisible = true;
    this.form.id = this.menuitem.id;
    this.form.isCate = this.menuitem.isCate;
    this.form.title = this.menuitem.title;
    this.form.content = this.menuitem.content;
  }
  // 提交修改事件方法
  subMethods() {
    this.$store.commit('Edit',this.form);
    this.dialogVisible = false;
  }
  // 删除事件
  delMethods() {
    this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        this.$store.commit('Del',this.form);
        this.$message({
          type: "success",
          message: "删除成功!"
        });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
  }
  created() {
    // 初始化判断类型
    if (this.menuitem.isCate === 0) {
      this.cate = "学习";
    } else if (this.menuitem.isCate === 1) {
      this.cate = "工作";
    } else {
      this.cate = "热门";
    }
  }
}
</script>

<style scoped>
.content {
  width: 200px;
  height: 200px;
  margin: 10px;
  background: #cccccc;
  text-align: center;
}
.edit {
  background: blueviolet;
  width: 50px;
  margin: 0 auto;
  border-radius: 20px;
}
.del {
  background: red;
  width: 50px;
  margin: 0 auto;
  border-radius: 20px;
}
</style>
